<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
    <style>
        .layui-table-cell{
            height: auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
        }
        .table_h{
            height: 630px;
        }
        .layui-card-body>.layui-table>tbody>tr:hover{
            background-color: #fff;
        }
        .anchor_list {
            width:100%;
            height: 50px;
            border:1px solid #e6e6e6;
            border-radius:5px;
            margin-top: 10px;
            background-color: #f2f2f2;
        }

        .anchor_list>table{
            background-color: #f2f2f2;
        }

        .anchor_list_this{
            background-color: #d7d7d7;
        }

        .com_content{
            overflow:hidden;
            white-space:pre-line;
            text-overflow:ellipsis;
        }

        .Separator {
            position: relative;
            z-index: 1;
            height: 1px;
            margin: 0;
            margin-top: -0.2em;
            margin-bottom: 2em;
            pointer-events: none;
            text-align: center;
        }
        .Separator .separator__hr {
            position: relative;
            z-index: 5;
            top: 1em;
            border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
            margin: 0;
        }

        .Separator .separator__text {
            position: relative;
            z-index: 5;
            display: inline-block;
            padding: 0 1em;
            background: var(--center-channel-bg);
            border-radius: 50px;
            color: var(--center-channel-color);
            line-height: 2em;
            font-size: 14px;
            background-color: #fff
        }

        ::-webkit-scrollbar{display: none;}

    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <strong>主播:</strong>&nbsp;{$user->nick_name} &nbsp;&nbsp;<strong>主播ID:</strong>&nbsp;{$user->id}
            <a class="layui-btn" href="javascript:;" style="height:35px;line-height: 35px; margin-top:3px;float:right" onclick="close_index()" title="关闭">
                关闭
            </a>
        </div>
        <div class="layui-card-body" style="padding: 0px">
            <table class="layui-table" style="table-layout:fixed;width: 100%; height: 630px">
                <tbody>
                    <tr>
                        <td class="table_h" style="width: 320px;border: 0px;padding: 0px 0px">
                            <div style="width: calc(100% - 21px);height: 100%;border:1px solid #e6e6e6;border-radius:3px;padding: 0px 8px 5px 8px;overflow-y:auto">
                                <ul style="width: 100%;padding: 5px 0px">
                                    <?php foreach($list as $value){?>
                                    <li class="anchor_list">
                                        <table style="width: 100%;table-layout:fixed;" onclick='anchor_info(this,<?php echo json_encode($value, 512); ?>)'>
                                            <tr style="width: 100%;pointer-events: none" class="anchor_info">
                                                <td rowspan="2" style="height: 50px; width:50px;padding: 2px 5px;border: 0px;">
                                                    <img style="display: block;margin:0px auto; height: 46px;width:auto;max-width:46px" src="<?php echo $value['avatar']; ?>" />
                                                </td>
                                                <td style="padding: 0px 0px;border: 0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{$value['name']}</td>
                                                <td rowspan="2" style="height: 50px; width:90px;line-height: 50px;padding: 0px 0px;border: 0px;text-align: center">
                                                    人数({$value['user_num']})
                                                </td>
                                            </tr>
                                            <tr style="width: 100%;pointer-events: none">
                                                <td style="padding: 0px 0px;border: 0px"><strong>群ID:</strong>{$value['id']}</td>
                                            </tr>
                                        </table>
                                    </li>
                                    <?php }?>
                                </ul>
                            </div>
                        </td>
                        <td class="table_h" style="border: 0px;padding: 0px 0px">
                            <div style="width: 100%;height: 100%;border:1px solid #e6e6e6;border-radius:3px;padding:0px 0px 5px 0px">
                                <div style="width:calc(100% - 15px);height: 50px; margin-top:0px;text-align: center;;line-height: 50px;background-color: #f2f2f2;padding:0px 5px 0px 10px;text-align: left;font-size: 13px">
                                    <div style="float: left" id="group_title"></div>
                                    <div class="layui-inline" style="float: right;">
                                        <div class="layui-btn" id="FormSubmit">
                                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="float: right;">
                                        <div class="layui-input-inline" style="width:160px">
                                            <input type="text" name="content" placeholder="请输入关键词" autocomplete="off" id="content" class="layui-input"/>
                                        </div>
                                    </div>
                                </div>
                                <div style="width:calc(100% - 10px);height: 560px; margin-top:0px;padding:10px 5px;overflow-y:auto" id="chat_log"></div>
                            </div>
                        </td>
                        <td class="table_h" style="width: 320px;border: 0px;padding: 0px 0px">
                            <div style="width: 100%;height: 100%;border:1px solid #e6e6e6;border-radius:3px;padding:0px 0px 5px 0px" id="group_info">
                                <div style="width: 100%;height: 50px; margin-top:0px;text-align: center;;line-height: 50px;background-color: #f2f2f2">群聊信息</div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    group_id = 0;
    pageIndex = 1;
    pageCount = 0;
    layui.config({
        base: "/layuiadmin/" //静态资源所在路径
    }).extend({
        index: "lib/index", //主入口模块
    }).use(["table", 'form'], function () {
        $ = layui.jquery, form = layui.form, table = layui.table;
        $('#chat_log').scroll(function (e) {
            if ($('#chat_log').scrollTop() == 0 && pageIndex < pageCount ) {
                chat_log(group_id, pageIndex + 1, false);
            }
        });

        $("#FormSubmit").click(function () {
            if (group_id != 0) {
                pageIndex = 1;
                pageCount = 0;

                $("#chat_log").empty();
                chat_log(group_id, 1, true);
            }
        });
    });

    function close_index() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
    
    function anchor_info(obj, item) {
        if ($(obj).hasClass('bbbb')) {
            return false;
        }
        $(".anchor_list>table").attr({"style":"width: 100%;table-layout:fixed;background-color:#f2f2f2"});
        $('.anchor_list>table').removeClass('bbbb');
        $(obj).attr({"style":"width: 100%;table-layout:fixed;background-color:#d7d7d7"});
        $(obj).addClass('bbbb');
        group_id = item.id;
        pageIndex = 1;
        pageCount = 0;

        var status = '正常';
        if (item.status == 1) {
            status = '解散';
        }

        $("#group_title").empty();
        $("#group_title").html(
            '<strong>创建时间:</strong>' + item.created_at+ ' &nbsp;&nbsp;<strong>创建人:</strong>' + item.admin_name +' &nbsp;&nbsp;<strong>状态:</strong>' + status +' &nbsp;&nbsp;'
        );

        $("#chat_log").empty();

        $("#group_info").empty();
        $("#group_info").html(
            '<div style="width: 100%;height: 50px; margin-top:0px;text-align: center;;line-height: 50px;background-color: #f2f2f2">群聊信息</div>' +
            '<div style="width: 100%;height: 56px;padding: 2px 0px"><table style="width: 100%;table-layout:fixed;">' +
            '<tr style="width: 100%;pointer-events: none">' +
                '<td rowspan="2" style="height: 56px; width:56px;padding: 2px 10px;border: 0px;"><img style="display: block;margin:0px auto; height: 46px;width:auto;max-width:46px" src="' + item.avatar + '" /></td>' +
                '<td style="padding: 0px 0px;border: 0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">' + item.name +'</td>' +
            '</tr>' +
            '<tr style="width: 100%;pointer-events: none"><td style="padding: 0px 0px;border: 0px"><strong>群聊ID:</strong>' + item.id + '</td></tr></table></div>' +
            '<div style="width: 290px;height: 40px;line-height: 40px; margin-left: 10px"><strong>群介绍</strong></div>' +
            '<div style="width: 290px;height: 150px;margin-left: 10px;border:1px solid #e6e6e6;padding: 5px;font-size:12px;overflow-y:auto">' + item.introduce + '</div>' +
            '<div style="width: 290px;height: 40px;line-height: 40px; margin-left: 10px"><strong>群成员</strong>('+item.user_num+'/500)</div>' +
            '<div style="width: 320px;height: 235px;border-top:1px solid #e6e6e6;overflow-y:auto" id="user_list"><ul style="width:calc(100%-20px);padding: 5px 10px"></ul></div>'
        /**
         * '<div style="width: 250px;height: 40px;line-height: 40px; margin-left: 10px"><strong>欢迎语</strong></div>' +
         '<div class="com_content" style="width: 250px;height: 80px;margin-left: 10px;border:1px solid #e6e6e6;padding: 5px;font-size:13px">'+ item.welcome_desc +'</div>' +
         */
    );

        user_list(group_id, 1);
        chat_log(group_id, 1, true);
    }
    
    function user_list(group_id, page) {
        $.ajax({
            url: '/admin/groupchat/user_list',
            type: 'post',
            data: {group_id: group_id,page:page},
            dataType: 'json',
            success: function (data) {
                if (data.code == 0) {
                    var list = data.list;
                    var htmlStr = '';
                    for (var i = 0; i < list.length; i++) {
                        htmlStr += '<li class="anchor_list"><table style="width: 100%;table-layout:fixed;">';
                        htmlStr += '<tr style="width: 100%;pointer-events: none" class="anchor_info">';
                        htmlStr += '<td rowspan="2" style="height: 50px; width:50px;padding: 2px 5px;border: 0px;"><img style="display: block;margin:0px auto; height: 46px;width:auto;max-width:46px" src="'+ list[i].user.avatar +'" /></td>';
                        htmlStr += '<td style="padding: 0px 0px;border: 0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><strong>昵称:</strong>' + list[i].user.nick_name +'</td>';
                        htmlStr += '<tr style="width: 100%;pointer-events: none"><td style="padding: 0px 0px;border: 0px"><strong>猎鹰ID:</strong>' + list[i].user.id + '</td></tr>';
                        htmlStr += '</table></li>';
                    }
                    if (htmlStr) {
                        $('#user_list>ul').append(htmlStr);
                        if (data.page < data.pageCount) {
                            $('#user_list>ul').append('<li id="user_list_page" style="width:100%;height:25px;line-height:25px;border:1px solid #e6e6e6;border-radius:5px;text-align: center;margin-top: 10px;background-color: #3eacef"><a href="javascript:;" onclick="user_list_tmp(' + (parseInt(data.page) + 1) +')">加载更多</a></li>');
                        }
                    }

                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            },
            error: function(res) {
            }
        });
    }

    function user_list_tmp(page) {
        $("#user_list_page").remove();
        user_list(group_id, page);
    }

    function chat_log(group_id, page, is_bottom) {
        var content = $("#content").val();
        $.ajax({
            url: '/admin/groupchat/chat_log',
            type: 'post',
            data: {group_id: group_id, page:page, content: content},
            dataType: 'json',
            beforeSend: function () { //当一个Ajax请求开始时触发
                $("#notHistoryMsg").remove();
                $('#chat_log').prepend('<div style="position: relative;" id="notHistoryMsg"><div class=""><div class="Separator"><hr class="separator__hr"><div class="separator__text"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i><span>聊天内容加载中...</span></div></div></div></div>');
                //layer.load(0, {shade: [0.1,'#fff'],offset:[ $('#chat_log').offset().top + 'px',($('#chat_log').offset().left + 100) + 'px']});
            },
            success: function (data) {
                //layer.closeAll();
                $("#notHistoryMsg").remove();
                if (data.code == 0) {
                    var list = data.list;
                    var htmlStr = '';
                    for (var i = list.length - 1; i >= 0; i--) {
                        var roleHtml = '';
                        if (list[i].role == 1) {
                            roleHtml = '<span style="background-color: #02A8A2;padding:0px 5px;font-size:13px;color:#FFF;border-radius:5px;margin-left: 5px;">房管</span>';
                        } else if(list[i].role == 2) {
                            roleHtml = '<span style="background-color: #EC6353;padding:0px 5px;font-size:13px;color:#FFF;border-radius:5px;margin-left: 5px;">群主</span>';
                        }

                        if (list[i].type == 7) {
                            var content = '<img src="' + list[i].image_url +'" ondblclick="img_view(\'' + list[i].image_url + '\')" style="max-width: 350px;max-height: 260px;width: auto;height: auto" title="双击图片查看">';
                        } else {
                            var content = list[i].content;
                        }
                        //
                        htmlStr += '<div style="padding: 8px 0px;"><div>';
                        htmlStr += '<strong>' + list[i].nick_name + '</strong>' + roleHtml + '<date style="padding-left: 20px">' + list[i].send_time + '</date></div>';
                        htmlStr += '<div class="com_content" style="width: 450px;min-height:30px;max-height:500px;margin-left: 30px;padding: 5px 0px;">' + content + '</div></div>';
                    }

                    var scrollHeight = $('#chat_log')[0].scrollHeight;

                    if (htmlStr) {
                        $('#chat_log').prepend(htmlStr);
                        pageIndex = data.page;
                        pageCount = data.pageCount;

                        if (data.page == data.pageCount) {
                            //$("#chat_log").prepend('<div style="display: block;clear: both;overflow: hidden;margin-bottom: 15px;text-align: center;color: #999999;" id="notHistoryMsg">没有更多历史消息了~</div>');
                            $("#chat_log").prepend('<div style="position: relative;" id="notHistoryMsg"><div class=""><div class="Separator"><hr class="separator__hr"><div class="separator__text">没有更多历史消息了~</div></div></div></div>');
                        }

                        if (is_bottom) {
                            $('#chat_log').scrollTop($('#chat_log')[0].scrollHeight);
                        } else {
                            $('#chat_log').scrollTop($('#chat_log')[0].scrollHeight - scrollHeight);
                        }
                    } else {
                        if (data.pageCount == 0) {
                            //$("#chat_log").prepend('<div style="display: block;clear: both;overflow: hidden;margin-bottom: 15px;text-align: center;color: #999999;" id="notHistoryMsg">没有更多历史消息了~</div>');
                            $("#chat_log").prepend('<div style="position: relative;" id="notHistoryMsg"><div class=""><div class="Separator"><hr class="separator__hr"><div class="separator__text">没有更多历史消息了~</div></div></div></div>');
                        }
                    }

                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            },
            error: function (res) {
                layer.closeAll();
            }
        });
    }

    function img_view(src) {
        if (src) {
            layer.photos({
                photos: {
                    "title": "",
                    "data": [{
                        "src": src,
                    }]
                }
                , shade: 0.01
                , closeBtn: 1
            });
        }
    }

</script>
</body>
</html>
